<script setup lang="ts">
const province = defineModel<string>("province");
const city = defineModel<string>("city");
const district = defineModel<string>("district");

const handleReginChange = ({ detail: { value } }) => {
  province.value = value[0];
  city.value = value[1];
  district.value = value[2];
};
</script>

<template>
  <picker
    mode="region"
    :value="[province, city, district]"
    @change="handleReginChange"
  >
    <slot />
  </picker>
</template>
